<template>
    <div class="dashboardSearchbar">
        <van-search v-model="value" placeholder="车牌或姓名" show-action @click-input="onClickButton">
            <template #action>
                <van-button class="searchButton" @click="onClickButton" type="primary" :icon="iconDeep">搜索</van-button>
                <van-button id="openCamera" type="primary" :icon="iconPhoto" class="takePhoto">拍车牌</van-button>
            </template>
        </van-search>
    </div>


    <input type="file" accept="image/*" id="cameraInput" style="display:none;" capture="environment">

    <div class="previewWrapperClass" style="display:none;" id="previewWrapper">
        <img id="preview" class="previewImg" />

        <div style="    text-align: center;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    ">正在上传，请稍后
            <van-loading />
        </div>
    </div>

</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import iconPhoto from '@/assets/icons/icon_photo.png'
import iconDeep from '@/assets/icons/icon_deepseek.png'
import axios from 'axios'
import { useRouter } from 'vue-router';
import DialogTool from '@/util/DialogTool';
const router = useRouter();


const value = ref();

const onClickButton = () => {
    router.push("/query/aiChat");
}

onMounted(() => {

    document.getElementById('openCamera')?.addEventListener('click', function () {
        document.getElementById('cameraInput')?.click();
    });

    document.getElementById('cameraInput')?.addEventListener('change', function (event) {
        //@ts-ignore
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function (e) {
                const preview = document.getElementById('preview');
                if (preview) {
                    //@ts-ignore
                    preview.src = e.target.result;
                    preview.style.display = 'block';

                    const previeWrapper = document.getElementById('previewWrapper');
                    if (previeWrapper) {
                        previeWrapper.style.display = 'block';
                    }

                }

            }
            reader.readAsDataURL(file);

            //开始上传
            const formData = new FormData();
            formData.append('file', file);

            // 定义用户名和密码
            const username = 'carocr';
            const password = 'Tju@1885';

            // 创建认证的基本信息
            const basicAuth = 'Basic ' + btoa(`${username}:${password}`);


            axios.post('/api/v1/ocr', formData, {
                headers: {
                    'Authorization': basicAuth
                }
            })
                .then((resp) => {
                    const result = resp.data.result.plate_list;
                    if (result.length > 0) {
                        var code = result[0].code;
                        const previeWrapper = document.getElementById('previewWrapper');
                        if (previeWrapper) {
                            previeWrapper.style.display = 'none';
                        }
                        router.push('/query/queryIndex?code=' + code)

                    } else {
                        DialogTool.showAlert("未识别出车牌号，请重新拍照！")
                        const previeWrapper = document.getElementById('previewWrapper');
                        if (previeWrapper) {
                            previeWrapper.style.display = 'none';
                        }
                    }
                });

        }
    });
})

</script>
<style>
.dashboardSearchbar .van-search__content {
    border-radius: 0;
    border: 1px solid #004e9b;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: none;
}

.dashboardSearchbar .van-search__field {
    height: 42px;
}

.dashboardSearchbar .van-search__action {
    padding-left: 0;
}

.dashboardSearchbar .van-search__action .van-button {
    border-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.takePhoto {
    margin-left: 10px;
    border-radius: 4px !important;
}

.takePhoto .van-icon__image {
    width: 20px !important;
    height: 20px !important;
}

.previewImg {
    width: 100%;
    border-radius: 10px;
}

.previewWrapperClass {
    padding: 40px;
    background-color: #fff;
}

.searchButton .van-icon__image {
    width: 20px !important;
    height: 20px !important;
}
</style>